{
	template:`
	<a-page-header title="选择" sub-title="图片列表">
		<template #extra>
		<a-input-search v-model:value="name" placeholder="搜索名称" enter-button :allowClear="true" @search="initImageList" style="width: 200px"/>
		<a-popover placement="leftTop" :open="loadShow">
			<a-upload :show-upload-list="false" accept="image/jpg,image/jpeg,image/png" v-model:file-list="fileList" @change="uploadChange" :multiple="true" :action="'action/manage/imageInfo/uploadImage?imageType='+imageType+'&adminToken='+adminToken+'&thumWidth=&thumRatio='">
				<a-button type="primary">上传</a-button>
			</a-upload>
			<template #content>
				<div v-for="item in fileList">
					{{item.name}}
					<a-progress :percent="item.percent" />
				</div>
			</template>
		</a-popover>
			<m-back @click="back(false);">关闭</m-back>
		</template>
		<a-card :hoverable="true" :bodyStyle="{padding:'10px 20px 20px'}">
			<a-divider orientation="left">未使用</a-divider>
			<a-list :grid="{ gutter: 16, column: 6 }" :data-source="data.list_false">
				<template #renderItem="{ item }">
				    <div class="padding-sm">
						<img :src="item.thumPath" style="width:100%;" @click="viewImage(item)"/>
					    <div class="text-cut text-white text-center" style="margin-top:-54px;">{{item.name}}</div>
						<a-row v-if="item.oid==selected" class="text-center">
							<a-col :span="24">
								<div style="line-height:32px;color:#fff;background-color:var(--colorPrimary);">当前选择</div>
							</a-col>
						</a-row>
						<a-row v-else class="text-center">
							<a-col :span="12">
								<div @click="back(true,item);" style="line-height:32px;background-color:rgba(233,233,233,0.9);">
									<a-typography-link>选择</a-typography-link>
								</div>
							</a-col>
							<a-col :span="12">
								<a-popconfirm title="确定要删除吗?" @confirm="deleteImg(item)">
									<div style="line-height:32px;background-color:rgba(233,200,200,0.9);">
										 <a-typography-text type="danger">删除</a-typography-text>
									</div>
								</a-popconfirm>
							</a-col>
						</a-row>
					</div>
				</template>
			</a-list>
			<a-button v-if="data['has_false']" type="link" block @click="loadImage(false)">...加载更多...</a-button>
			<a-divider orientation="left">已使用</a-divider>
			<a-list :grid="{ gutter: 16, column: 6 }" :data-source="data.list_true">
				<template #renderItem="{ item }">
				    <div class="padding-sm">
						<img :src="item.thumPath" style="width:100%;" @click="viewImage(item)"/>
					    <div class="text-cut text-white text-center" style="margin-top:-54px;">&nbsp;{{item.name}}&nbsp;</div>
						<a-row class="text-center">
							<a-col v-if="item.oid==selected" :span="24">
								<div style="line-height:32px;color:#fff;background-color:var(--colorPrimary);">当前选择</div>
							</a-col>
							<a-col v-else :span="24">
								<div @click="back(true,item);" style="line-height:32px;background-color:rgba(233,233,233,0.9);">
									<a-typography-link>选择</a-typography-link>
								</div>
							</a-col>
						</a-row>
                    <div>
				</template>
			</a-list>
			<a-button v-if="data['has_true']" type="link" block @click="loadImage(true)">...加载更多...</a-button>
		</a-card>
	</a-page-header>
	`,
	props: ['localeZh','param','parentVue'],
	data:function(){
		return {
			selected:'',
			imageType:'',
			adminToken:'',
			name:'',
			fileList:[],
			data:{},
			pageNum:6,
			loadShow:false,
			loadTimer:null,
		};
	},
	mounted(){
		this.selected=this.param.selected;
		this.imageType=this.param.imageType;
		this.adminToken=this.param.adminToken;
		this.name=this.param.name;
		this.initImageList();
	},
	methods:{
	    initImageList:function(){
	        this.data={
                list_false:[],
                list_true:[],
                load_false:false,
                load_true:false,
                index_false:0,
                index_true:0,
                has_false:true,
                has_true:true,
            };
            this.loadImage(false);
            this.loadImage(true);
	    },
		uploadChange:function(obj){
			if(obj.file.status=="done"){
				var json=JSON.parse(obj.file.xhr.response);
				this.data['list_false'].unshift(json.model);
				this.data['index_false']++;
			}
			if(obj.fileList.length){
				var b=false;
				for(var i=0;i<obj.fileList.length;i++){
					if(obj.fileList[i].status!='done'){
						b=true;
					}
				}
				if(b){
					this.loadShow=b;
				}else{
					if(null!=this.loadTimer) clearTimeout(this.loadTimer);
					this.loadTimer=setTimeout(()=>{
						this.loadShow=b;
						this.fileList=[];
					},1500);
				}
			}
		},
		loadImage:function(isUsed){
			this.data['load_'+isUsed]=true;
			this.requestData("action/manage/imageInfo/imageList",
				{"imageType":this.imageType,"name":this.name,"adminToken":this.adminToken,"page":{"index":this.data['index_'+isUsed],"num":this.pageNum},"isUsed":isUsed},
				function(data){
					for(var i=0;i<data.list.length;i++){
						this.data['list_'+isUsed].push(data.list[i]);
					}
					this.data['has_'+isUsed]=data.code==0&&data.list.length>=this.pageNum;
					this.data['index_'+isUsed]+=data.list.length;
					this.data['load_'+isUsed]=false;
				}.bind(this)
			);
		},
		removeData:function(oid){
			for(var i=0;i<this.data.list_false.length;i++){
				if(this.data.list_false[i].oid==oid){
					this.data.list_false.splice(i,1);
					break;
				}
			}
		},
		deleteImg:function(img){
			this.requestData("action/manage/imageInfo/delete",{"imageOid":img.oid,"adminToken":this.adminToken},function(data){
				if(data.code==0){
					this.remind().success(data.msg);
					this.removeData(data.oid);
				}else{
					this.remind().error(data.msg)
				}
			}.bind(this));
		},
	}
}